import VueRouter from "vue-router";
import Vue from "vue";

// 引入组件
import About from "@/views/About";
import Home from "@/views/Home";
import Message from "@/views/Message";
import News from "@/views/News";
import Detail from "@/views/Detail";

// 安装插件
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    // 路由配置项

    {
      path: "/home",
      component: Home, // 修正为单数的"component"
      redirect: "/home/news",
      name: "Home",
      children: [
        {
          path: "message", // 移除了开头的斜杠，使其成为相对路径
          component: Message,
          name: "message",
          children: [
            {
              name: "Detail",
              path: "/home/message/:id",
              component: Detail,
            },
          ],
        },
        {
          path: "news",
          component: News,
          name: "News",
          meta: {
            name: "jack",
            age: 18,
          },
        },
      ],
    },
    {
      path: "/about",
      component: About, // 修正为单数的"component"
      name: "About",
    },
    {
      path: "*", // 重定向任意未匹配到的路由至home
      redirect: "/home",
    },
  ],
});

export default router;
